
function createElementPos(props,func){
	var tempElement = document.createElement(props.eleType);
	document.body.appendChild(tempElement);
	var cl = new func(props);
	with(tempElement.style){
		position = "absolute";
		background = props.bgColor;
		width = props.width+"px";
		height = props.height+"px";
		left = cl.left+"px";
		top = cl.top+"px";
	}

}

function main(){
	//设定位置的方法
	function $CompWS() {
	    var de = document.documentElement,db = document.body;
	    var W = (window.innerWidth || (de&&de.clientWidth) || db.clientWidth || 0);
	    var H = (window.innerHeight|| (de&&de.clientHeight) || db.clientHeight || 0);
	    return {width: W, height: H};
	}
	var bodyCenterFunc = function(pros){//左右居中,上下居中
		var comp = new $CompWS();
		this.left = (comp.width-pros.width)/2;
		this.top = (comp.height-pros.height)/2;
	}
	var bodyLeftCenterFunc = function(pros){//上下居中
		var comp = new $CompWS();
		this.left= 0;
		this.top = (comp.height-pros.height)/2;
	}
	//元素的属性
	var pros={
		p1:{id:"p1",width:900,height:450,eleType:"div",bgColor:"black"},
		p2:{id:"p2",width:700,height:150,eleType:"div",bgColor:"red"},
		p3:{id:"p3",width:300,height:250,eleType:"div",bgColor:"yellow"},
		p4:{id:"p4",width:100,height:600,eleType:"div",bgColor:"chartreuse"}
	}
	//调用
	createElementPos(pros.p1,bodyCenterFunc);
	createElementPos(pros.p2,bodyLeftCenterFunc);
	createElementPos(pros.p3,bodyCenterFunc);
	createElementPos(pros.p4,bodyCenterFunc);
}
window.onload=main;